<template>
  <div class="box" :style="style">{{ 1 + 1 }}</div>
  <div class="fix-box">
    <div class="fix-box-inner">fixed {{ 1 + 1 }}</div>
  </div>
  <button @click="add">添加</button>
  <button @click="add2">添加2</button>
  <img :src="url" alt="" style="width:100px;display:block;" />
</template>
<script>
import html2canvas from 'html2canvas'
import gsap from '../../libs/gsap-3.11.1.min.js'
export default {
  data() {
    return {
      style: {},
      url: ''
    }
  },
  methods: {
    add() {
      console.log(`helloworld`)
      let obj = {
        x: 0
      }
      gsap.to(obj, {
        x: 1,
        onUpdate: () => {
          //console.log(obj.x)
          let x = 100 * obj.x
          let r = Math.PI * 2 * obj.x
          this.style = {
            transform: `translatex(${x}px)`
          }
        }
      })
    },
    add2() {
      html2canvas(document.querySelector('.fix-box'), {
        //allowTaint: true,
        //useCORS: true,
        scale: 3,
        dpi: 300
        //scrollY: 300
      }).then((canvas) => {
        // 转换成base64格式，这个格式可以挂载到img里，也可以下载下来，也可以打压缩包下载下来
        const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
        let img = `data:image/png;base64,${base64}`
        this.url = img
      })
    }
  },
  mounted() {}
}
</script>
<style type="text/css" lang="scss">
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.fix-box {
  width: 120px;
  border: 1px solid #000;
  position: fixed;
  left: 200px;
  top: 200px;
  box-sizing: border-box;
  background: url('../../images/p1.png') 0 0 / 100% auto no-repeat;
  //background-attachment: fixed;
  &-inner {
    height: 200vh;
  }
}
</style>
